import 'package:flutter/material.dart';

import 'tab1.dart';
import 'tab2.dart';
import 'tab3.dart';
import 'tab4.dart';

class Tabs extends StatefulWidget {
  Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _index = 0;
  List tabIndex = [
    Tab1(),
    Tab2(),
    Tab3(),
    Tab4(),
  ];

  List<BottomNavigationBarItem> _getTabs() {
    var listTab = <BottomNavigationBarItem>[];
    List tabInfo = ["首页","商城","矿场", "我的"];
    for (var i = 0; i < tabInfo.length; i++) {
      listTab.add(
        BottomNavigationBarItem(
            icon: _index == i
                ? new Image.asset('assets/h${i+1}.png', width: 40, height: 40)
                : new Image.asset('assets/hh${i+1}.png', width: 40, height: 40),
            label: tabInfo[i]),
      );
    }
    return listTab;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
          // appBar: AppBar(
          //   title: Text("Flutter App1"),
          // ),
          body: tabIndex[this._index],
          bottomNavigationBar: Theme(
            data: Theme.of(context).copyWith(
              //设置背景色`BottomNavigationBar`
              canvasColor: Color.fromRGBO(34, 48, 91, 1),
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              unselectedItemColor: Color(0xFF7886b0),
              fixedColor: Color(0xff17E2E4), 
              items: this._getTabs(),
              // [
              //   BottomNavigationBarItem(
              //       icon: _index == 0
              //           ? new Image.asset('assets/h1.png',
              //               width: 40, height: 40)
              //           : new Image.asset('assets/hh1.png',
              //               width: 40, height: 40),
              //       label: "首页"),
              //   BottomNavigationBarItem(
              //     icon: _index == 1
              //         ? new Image.asset('assets/h2.png', width: 40, height: 40)
              //         : new Image.asset('assets/hh2.png',
              //             width: 40, height: 40),
              //     label: "商城",
              //   ),
              //   BottomNavigationBarItem(
              //     icon: _index == 2
              //         ? new Image.asset('assets/h3.png', width: 40, height: 40)
              //         : new Image.asset('assets/hh3.png',
              //             width: 40, height: 40),
              //     label: "矿场",
              //   ),
              //   BottomNavigationBarItem(
              //     icon: _index == 3
              //         ? new Image.asset('assets/h4.png', width: 40, height: 40)
              //         : new Image.asset('assets/hh4.png',
              //             width: 40, height: 40),
              //     label: "我的",
              //   )
              // ],
              currentIndex: this._index,
              onTap: (int index) {
                setState(() {
                  this._index = index;
                });
              },
            ),
          )),
    );
  }
}
